﻿<!doctype html>
<html>
<head>
    <title>BizTalk Flow Visualizer</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link href="css/ui-darkness/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/styles.css">
    <!-- libraries used -->
    <script type='text/javascript' src='scripts/jquery-1.11.0.min.js'></script>
    <script type='text/javascript' src='scripts/jquery-ui.1.10.4.min.js'></script>
    <script type='text/javascript' src='scripts/jquery-ui-timepicker-addon.js'></script>
    <script type='text/javascript' src='scripts/jquery.jsPlumb-1.5.5-min.js'></script>
    <!-- solution code -->
    <script type='text/javascript' src="scripts/visualizer.js"></script>
</head>
<body>
    <!-- credits:
        icons sourced from: http://icons8.com/license
        backgrounds sourced from: http://tiled-bg.blogspot.com
    -->
    <nav>
        <div id="title">
            <div id="settings">
                <img id="icon-reload" class="menu-button" title="Reload" onclick="$('#spinner').show();drawPage()" src="images/spacer.png" />
                <img id="icon-settings" class="menu-button" title="Settings" onclick="$('#settingsDialog').dialog('open');" src="images/spacer.png" />
            </div>
        </div>
    </nav>
    <!-- welcome text -->
    <div id="welcomeText">
        <h2>Welcome to the BizTalk Flow Visualizer (Alpha)</h2>
        <p>This tool has been designed to help BizTalk developers and administrators visualize the flow of messages through their implementation of <a href="http://www.microsoft.com/biztalk" target="_blank">Microsoft's BizTalk Server</a>.</p>
        <p>As an integration platform BizTalk provides developers with a range of options that can be applied when designing a solution.  Choices made during the design and implementation of a solution become an important element in determining the overall performance of the solution, and when troubleshooting the solution is required later on.</p>
        <p>
            The intent of this tool is to provide a mechanism whereby:
            <ul>
                <li>Developers can <b>see</b> how messages are flowing, or have flowed, based on their solution's design.</li>
                <li>Average performance metrics for each step in a message flow can help to identify potential bottlenecks in a process.</li>
                <li>Provide BizTalk administrators with a concise way to understand what is happening in BizTalk, and where errors are occurring.</li>
                <li>Provide BizTalk developers and administrators tasked with working on an existing solution with a means to easily gain insight into how the components of the BizTalk solution are linked to each other.</li>
            </ul>
        </p>
        <p><b>NOTE:</b> The solution is currently based on queries run against the BizTalk tracking database (BizTalkDTADb), and will therefore only work for those pipelines and orchestrations that have tracking turned on.</p>
        <hr />
        <h2>User Guide</h2>
        <p>Use the following quick overview to aid you in the use of this tool:</p>
        <ul>
            <li><img src="images/gettingStarted/settings.png" width="40" /> Click the Settings button to set the time window and refresh options</li>
            <li><img src="images/gettingStarted/reload.png" width="40" />Click the Reload button to query for the latest data, using the specified Settings</li>
            <li>
                Once you have data returned and displayed, use the following key to understand how the data is visualized:
                <ul>
                    <li>Receive and send ports are represented as follows, with receive ports on the left and send ports on the right:<br /><img src="images/gettingStarted/port.png" height="50" /></li>
                    <li>Numbers on the left, next to the stopwatch icon, represent the average time in milliseconds the step took to execute</li>
                    <li>Numbers on the right, next to the message icon, represent the total number of messages processed through the step, for the time period selected</li>
                    <li>Errors that occur are represented as red shapes, and only display the total number of messages info:<br /><img src="images/gettingStarted/error.png" height="50" /></li>
                    <li>The flow of messages is indicated as a line drawn from one shape to another, with red lines indicating error message connections:<br /><img src="images/gettingStarted/connector.png" width="700" /></li>
                    <li>Orchestrations are rendered in the middle of the layout, wrapped in a green box, based on the first and last steps in an orchestration:<br /><img src="images/gettingStarted/orchestration.png" width="300" /></li>
                </ul>
            </li>
        </ul>
        <hr />
        <h2>Feature Plans</h2>
        <p>The following are ideas around further features that could be added to this solution.  If you have any other ideas, please let me know on the <a href="https://biztalkflowvisualizer.codeplex.com/discussions">Codeplex discussions page</a>.</p>
        <ul>
            <li>MSI executable to automate the install process.</li>
            <li>Include all orchestration steps - this may need to be done as a seperate dialog that opens up when clicking an orchestration box, due to space limitations.</li>
            <li>Display errors better - Errors that occur are currently logged just to the javascript console</li>
            <li>Split ports based on message type and URI - currently all messages going through a send or receive port are lumped together, but for more dynamic environments (such as those making use of the ESB Toolkit) there may be a need to split this info out based on message type and/or URI of the port.  <ul><li>For example, if a dynamic send port sends messages to SQL in some cases and to FTP in others, these could be shown seperately.</li></ul></li>
            <li>
                Continue to test different solution architectures and adapt this tool appropriately.  Scenarios that have not explicitly been catered for, meaning they may not render as expected, or may not render at all:
                <ul>
                    <li>Two-way receive ports show the receive and send ports as seperate ports, but conceptually the send phase should link to the receive port</li>
                    <li>Message de-batching and batching.</li>
                    <li>Errors within an orchestration that are not related to receiving or sending messages.</li>
                    <li>Called orchestrations may not shown as seperate orchestrations</li>
                    <li>Any others you have come across that are not properly catered for? Let me know on the <a href="https://biztalkflowvisualizer.codeplex.com/discussions">Codeplex discussions page</a>.</li>
                </ul>
            </li>
            <li>Animation on connectors - implement an animation that will show the rate of flow of messages on the different connectors</li>
            <li>Automatic refresh of the visualisation, thus enabling the view to be used as a dashboard as well</li>
            <li>Apply a filter to what is displayed, e.g. only show messages in Application X</li>
            <li>As the solution is based on tracking, provide a mechanism to check that tracking is configured correctly</li>
            <li>Provide an alternative solution that makes use of BAM to collect the data used for the visualization</li>
        </ul>
    </div>
    <!-- settings dialog -->
    <div id="settingsDialog" title="Settings">
        <div id="timeOptions">
            <p>Choose to base the visualization either on data for the last X minutes, or provide a specific start and end date and time to visualize flows for a specific period.</p>
            <table>
                <tr>
                    <td colspan="2">
                        <input type="radio" id="windowRolling" name="radTimeWindow" value="rolling" class="custom-radio" checked />
                        <label for="windowRolling">Rolling time window, using last </label>
                        <input type="text" id="lastMinutes" name="txtLastMinutes" value="10" style="width:20px" /> minutes
                    </td>
                </tr>
                <tr>
                    <td nowrap>
                        <input type="radio" id="windowSpecific" name="radTimeWindow" value="specific" class="custom-radio" />
                        <label for="windowSpecific">Show data between</label>
                    </td>
                    <td width="70%">
                        <input type="text" id="startTime" name="txtStartTime" value=" " class="datePicker textInput" />
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        and
                    </td>
                    <td>
                        <input type="text" id="endTime" name="txtEndTime" value=" " class="datePicker textInput" />
                    </td>
                </tr>
            </table>
        </div>
        <hr />
        <div id="devDemoData">
            <p>Enable this option to use static demo data.  If this is enabled the time window selection above is ignored.</p>
            <input type="checkbox" id="useDemoData" name="chkDemoData" /><label for="useDemoData"> Use demo data</label>
        </div>
        <hr />
        <div id="refreshOptions">
            <p>Enable this option to automatically refresh the display when the browser window is resized.</p>
            <input type="checkbox" id="resizeRefresh" name="chkResizeRefresh" checked="checked" /><label for="resizeRefresh"> Automatically refresh on browser resize</label>
        </div>
    </div>
    <!-- placeholder for flow diagram -->
    <div class="flowWorkspace" id="flowWorkspace"></div>
    <!-- spinner -->
    <div id="spinner" class="spinner"></div>
</body>
</html>
